<template>
  <div class="row-details">

    <!-- 贬损下发详情表开始 -->
    <table v-if="tableType === 0" class="tb1">
      <tbody>
      <tr>
        <td class="key">用户姓名</td>
        <td class="value">{{baseInfo.userName}}</td>
        <td class="key">购买时间</td>
        <td class="value">{{dateFormat(baseInfo.buyTime)}}</td>
      </tr>
      <tr>
        <td class="key">产品大类</td>
        <td class="value">{{baseInfo.productCategories}}</td>
        <td class="key">品牌</td>
        <td class="value">{{baseInfo.productBrand}}</td>
      </tr>
      <tr>
        <td class="key">型号</td>
        <td class="value">{{baseInfo.productModel}}</td>
        <td class="key">分公司办事处</td>
        <td class="value">{{baseInfo.branchOffice}}</td>
      </tr>
      <tr>
        <td class="key">分部经营部</td>
        <td class="value">{{baseInfo.branchDepartmentBusiness}}</td>
        <td class="key">分公司</td>
        <td class="value">{{baseInfo.branchCompany}}</td>
      </tr>
      <tr>
        <td class="key">店铺名称</td>
        <td class="value">{{baseInfo.shopName}}</td>
        <td class="key">渠道类型</td>
        <td class="value">{{baseInfo.channelType}}</td>
      </tr>
      <tr>
        <td class="key">销售时间</td>
        <td class="value">{{dateFormat(baseInfo.saleTime)}}</td>
        <td class="key">外呼时间</td>
        <td class="value">{{dateFormat(baseInfo.callOutTime)}}</td>
      </tr>
      <tr>
        <td class="key">外呼结果</td>
        <td class="value">{{baseInfo.callOutResult}}</td>
        <td class="key">使用情况</td>
        <td class="value">{{baseInfo.useCase}}</td>
      </tr>
      <tr>
        <td class="key">整体推荐程度</td>
        <td class="value">{{baseInfo.overallRecommendationLevel}}</td>
        <td class="key">整体推荐程度备注</td>
        <td class="value">{{baseInfo.overallRecommendationLevelComment}}</td>
      </tr>
      <tr>
        <td class="key">销售环节推荐程度</td>
        <td class="value">{{baseInfo.salesSectionRecommendationLevel}}</td>
        <td class="key">销售环节推荐程度备注</td>
        <td class="value">{{getReason(baseInfo.salesSectionRecommendationLevelComment)}}</td>
      </tr>
      <tr>
        <td class="key">使用情况备注</td>
        <td colspan="3" class="value">{{baseInfo.useCaseComment}}</td>
      </tr>
      <tr>
        <td class="key">评分理由备注</td>
        <td class="value" colspan="3" >{{baseInfo.scoreReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">销售环节推荐评分理由备注</td>
        <td class="value" colspan="3">
          {{baseInfo.salesSectionRecommendationScoreReasonsComment}}
        </td>
      </tr>
      </tbody>
    </table>
    <!-- 贬损下发详情表结束 -->

    <!-- 贬损转化详情表开始 -->
    <table v-if="tableType === 1" class="tb2">
      <tbody>
      <tr>
        <td class="key">分公司</td>
        <td class="value">{{baseInfo.branchCompany}}</td>
        <td class="key">分部经营部</td>
        <td class="value">{{baseInfo.branchDepartmentBusiness}}</td>
      </tr>
      <tr>
        <td class="key">店铺名称</td>
        <td class="value">{{baseInfo.shopName}}</td>
        <td class="key">用户姓名</td>
        <td class="value">{{baseInfo.userName}}</td>
      </tr>
      <tr>
        <td class="key">用户电话</td>
        <td class="value">{{baseInfo.customerPhone}}</td>
        <td class="key">型号</td>
        <td class="value">{{baseInfo.productModel}}</td>
      </tr>
      <tr>
        <td class="key">渠道类型</td>
        <td class="value">{{baseInfo.channelType}}</td>
        <td class="key">外呼时间</td>
        <td class="value">{{dateFormat(baseInfo.callOutTime)}}</td>
      </tr>
      <tr>
        <td class="key">外呼结果</td>
        <td class="value">{{baseInfo.callOutResult}}</td>
        <td class="key">使用情况</td>
        <td class="value">{{baseInfo.useCase}}</td>
      </tr>
      <tr>
        <td class="key">整体推荐程度备注</td>
        <td class="value">{{baseInfo.overallRecommendationLevelComment}}</td>
        <td class="key">销售环节推荐程度</td>
        <td class="value">{{baseInfo.salesSectionRecommendationLevel}}</td>
      </tr>
      <tr>
        <td class="key">销售代表</td>
        <td class="value">{{deroInfo.salesRepName}}</td>
        <td class="key">销售代表电话</td>
        <td class="value">{{details.salesRepMobile}}</td>
      </tr>
      <tr>
        <td class="key">使用情况备注</td>
        <td colspan="3" class="value">{{baseInfo.useCaseComment}}</td>
      </tr>
      <tr>
        <td class="key">评分理由备注</td>
        <td colspan="3" class="value">{{baseInfo.scoreReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">销售环节推荐评分理由备注</td>
        <td colspan="3" class="value">
          {{baseInfo.salesSectionRecommendationScoreReasonsComment}}
        </td>
      </tr>
      <tr>
        <td class="key">贬损大类</td>
        <td colspan="3" class="value">{{derogatoryCategories}}</td>
      </tr>
      <tr>
        <td class="key">贬损原因</td>
        <td colspan="3" class="value">{{baseInfo.derogatoryReason}}</td>
      </tr>
      </tbody>
    </table>
    <!-- 贬损转化详情表结束 -->

    <!-- 二次回访详情表开始 -->
    <table v-if="tableType === 2" class="tb3">
      <tbody>
      <tr>
        <td class="key">项目名称</td>
        <td class="value">{{baseInfo.itemName}}</td>
        <td class="key">回访任务</td>
        <td class="value">{{baseInfo.reviewTask}}</td>
      </tr>
      <tr>
        <td class="key">用户姓名</td>
        <td class="value">{{baseInfo.userName}}</td>
        <td class="key">失分销售环节</td>
        <td class="value">{{baseInfo.lostSalesLink}}</td>
      </tr>
      <tr>
        <td class="key">分值</td>
        <td class="value">{{baseInfo.scoreValue}}</td>
        <td class="key">型号</td>
        <td class="value">{{baseInfo.model}}</td>
      </tr>
      <tr>
        <td class="key">部门</td>
        <td class="value">{{baseInfo.department}}</td>
        <td class="key">分公司</td>
        <td class="value">{{baseInfo.branchCompany}}</td>
      </tr>
      <tr>
        <td class="key">分部</td>
        <td class="value">{{baseInfo.branchDepartment}}</td>
        <td class="key">渠道类型</td>
        <td class="value">{{baseInfo.channelType}}</td>
      </tr>
      <tr>
        <td class="key">外呼时间</td>
        <td class="value">{{dateFormat(baseInfo.callOutTime)}}</td>
        <td class="key">selecttime</td>
        <td class="value">{{dateFormat(baseInfo.selectTime)}}</td>
      </tr>
      <tr>
        <td class="key">外呼结果</td>
        <td class="value">{{baseInfo.callOutResult}}</td>
        <td class="key">外呼结果备注</td>
        <td class="value">{{baseInfo.callOutResultComment}}</td>
      </tr>
      <tr>
        <td class="key">是否联系</td>
        <td class="value">{{isContact}}</td>
        <td class="key">是否联系备注</td>
        <td class="value">{{baseInfo.ortouchComment}}</td>
      </tr>
      <tr>
        <td class="key">是否满意</td>
        <td class="value">{{isSatisfy}}</td>
        <td class="key">是否满意备注</td>
        <td class="value">{{baseInfo.orsatisfyComment}}</td>
      </tr>
      <tr>
        <td class="key">二次NPS调查</td>
        <td colspan="3" class="value">{{baseInfo.twNpsResearch}}</td>
      </tr>
      <tr>
        <td class="key">二次NPS调查备注</td>
        <td colspan="3" class="value">{{baseInfo.twNpsResearchComment}}</td>
      </tr>
      <tr>
        <td class="key">责任人</td>
        <td colspan="3" class="value">{{deroInfo.personCharge}}</td>
      </tr>
      </tbody>
    </table>
    <!-- 二次回访详情表结束 -->

    <!-- 分公司管理员详情表开始 -->
    <table v-if="tableType === 3" class="tb4">
      <tbody>
      <tr>
        <td class="key">分公司</td>
        <td class="value">{{baseInfo.branchCompany}}</td>
        <td class="key">分部经营部</td>
        <td class="value">{{baseInfo.branchDepartmentBusiness}}</td>
      </tr>
      <tr>
        <td class="key">店铺名称</td>
        <td class="value">{{baseInfo.shopName}}</td>
        <td class="key">用户姓名</td>
        <td class="value">{{baseInfo.userName}}</td>
      </tr>
      <tr>
        <td class="key">用户电话</td>
        <td class="value">{{baseInfo.customerPhone}}</td>
        <td class="key">型号</td>
        <td class="value">{{baseInfo.productModel}}</td>
      </tr>
      <tr>
        <td class="key">渠道类型</td>
        <td class="value">{{baseInfo.channelType}}</td>
        <td class="key">外呼时间</td>
        <td class="value">{{dateFormat(baseInfo.callOutTime)}}</td>
      </tr>
      <tr>
        <td class="key">外呼结果</td>
        <td class="value">{{baseInfo.callOutResult}}</td>
        <td class="key">使用情况</td>
        <td class="value">{{baseInfo.useCase}}</td>
      </tr>
      <tr>
        <td class="key">整体推荐程度备注</td>
        <td class="value">{{baseInfo.overallRecommendationLevelComment}}</td>
        <td class="key">销售环节推荐程度</td>
        <td class="value">{{baseInfo.salesSectionRecommendationLevel}}</td>
      </tr>
      <tr>
        <td class="key">销售代表</td>
        <td class="value">{{baseInfo.salesRepName}}</td>
        <td class="key">销售代表电话</td>
        <td class="value">{{details.salesRepMobile}}</td>
      </tr>
      <tr>
        <td class="key">使用情况备注</td>
        <td colspan="3" class="value">{{baseInfo.useCaseComment}}</td>
      </tr>
      <tr>
        <td class="key">评分理由备注</td>
        <td colspan="3" class="value">{{baseInfo.scoreReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">销售环节推荐评分理由备注</td>
        <td colspan="3" class="value">{{baseInfo.salesSectionRecommendationScoreReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">贬损大类</td>
        <td colspan="3" class="value">{{derogatoryCategories}}</td>
      </tr>
      <tr>
        <td class="key">贬损原因</td>
        <td colspan="3" class="value">{{baseInfo.derogatoryReason}}</td>
      </tr>
      </tbody>
    </table>
    <!-- 分公司管理员详情表结束 -->

  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'

  export default {
    props: {
      details: {
        type: Object,
        default: () => ({
          characterId: '',
          ctype: 0,
          npsBaseInfo: {},
          twCallbackBaseInfo: {},
          npsDerogatoryInfo: {}
        })
      }
    },
    data() {
      return {}
    },
    computed: {
      ...mapState({
        platformType: state => state.disparageManage.platformType,
        ctype: state => state.disparageManage.ctype,
        currentOrderUserType: state => state.disparageManage.currentOrderUserType,
        currentOrderCtype: state => state.disparageManage.currentOrderCtype
      }),
      ...mapGetters([
        'userType',
        'disparageType'
      ]),
      // 基础信息
      baseInfo() {
        return this.details[this.details.ctype === 2 ? 'twCallbackBaseInfo' : 'npsBaseInfo'] || {}
      },

      // 贬损信息
      deroInfo() {
        return this.details.npsDerogatoryInfo || {}
      },

      // 表格模板索引
      tableType() {
        if(this.currentOrderUserType === this.platformType.FGLY) {
          return this.currentOrderCtype === this.ctype.ECHF ? this.ctype.ECHF : 3
        }
        return this.currentOrderCtype
      },

      // 贬损大类
      derogatoryCategories() {
        const items = ['其他', '卖场', '安装', '送货', '品牌', '服务', '产品']
        return items[+this.baseInfo.derogatoryCategories]
      },

      // 是否联系
      isContact() {
        const items = ['否', '是']
        return items[+this.baseInfo.ortouch]
      },

      // 是否满意
      isSatisfy() {
        const items = this.details.ctype === 2 ? ['其他', '满意', '不满意'] : ['没处理', '还可以', '还行']
        return items[+this.baseInfo.orsatisfy]
      }

    },
    methods: {
      // 检测用户类型characterId
      checkUserType(characterId) {
        const regs = [/^_a_g_umc/, /^_a_g_xs/, /^_a_g_d_/]
        const index = regs.findIndex(item => item.test(characterId))
        return index > -1 ? regs[index].toString().replace(/[/^]/g, '') : ''
      },

      dateFormat(timestamp) {
        if(!timestamp) {
          return ''
        }
        const date = new Date(timestamp)
        let YYYY = date.getFullYear(),
          MM = date.getMonth() + 1,
          DD = date.getDate(),
          hh = date.getHours(),
          mm = date.getMinutes(),
          ss = date.getSeconds();
        MM = MM < 10 ? '0' + MM : MM
        DD = DD < 10 ? '0' + DD : DD
        hh = hh < 10 ? '0' + hh : hh
        mm = mm < 10 ? '0' + mm : mm
        ss = ss < 10 ? '0' + ss : ss
        return `${YYYY}-${MM}-${DD} ${hh}:${mm}:${ss}`
      },

      // 格式化原因
      getReason(data) {
        try {
          let reasons = data.replace(/;$/, '')
          reasons = JSON.parse(reasons)
          return reasons.map((reason, i) => {
            const key = reason.category
            const val = reason.content.join('，') || '无'
            return `${key}：${val}`
          }).join('；')
        } catch (e) {
          return data
        }
      }

    }
  }
</script>

<style lang="scss" scoped>

  table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
  }

  td {
    padding: 5px 10px;
    border: 1px solid #ccc;
  }

  .key {
    width: 20%;
    background-color: #f1f1f1;
  }

  .value {
    width: 30%;
    background-color: #fff;
  }

</style>
